<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="${basePath }">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>西普茗茶商品-搜索</title>
<meta name="renderer" content="webkit">

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="assets/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
	var isHTML5 = true;
</script>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<script src="js/excanvas.min.js"></script> 
    <script type="text/javascript">
		isHTML5 = false;
	</script>
<![endif]-->
<style type="text/css">
body {
	background: #fef9f3 !important;
}
</style>
</head>
<!--/head-->
<!-- BEGIN BODY -->
<body class="page-footer-fixed">
	<!-- BEGIN HEADER -->
	<div class="header navbar" style="background: #b9b9b9 !important;">
		<!-- BEGIN TOP NAVIGATION BAR -->
		<div class="input-group margin-top-10 margin-bottom-10">
			<span class="input-group-btn "> <a href="goods_type/get_shop_goods_type" class="btn text-white" type="button">
					<i class="fa fa-list-ul text-white"></i> 类型
				</a>
			</span>
			<input id="search_input" type="text" class="form-control" placeholder="在此输入关键字">
			<span class="input-group-btn">
				<button class="btn gold" type="button" id="search_submit_button">
					<i class="fa fa-search"></i>
				</button>
			</span>
		</div>
		<!-- END TOP NAVIGATION BAR -->
	</div>
	<!-- END HEADER -->
	<div class="clearfix "></div>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">

		<!-- 筛选开始 -->
		<div class="btn-group btn-group-justified text-gold margin-top-10" id="order_by_div" style="border: 1px solid #ccc; background: white; border-radius: 5px !important; width: 96% !important; margin: 0px auto;">
			<c:if test="${param.orderby=='goodsCommentNumber' }">
				<a href="javascript:void(0)" class="btn gold" data-orderby="goodsCommentNumber"> 默认 </a>
			</c:if>
			<c:if test="${param.orderby!='goodsCommentNumber' }">
				<a href="javascript:void(0)" class="btn btn-default" data-orderby="goodsCommentNumber"> 默认 </a>
			</c:if>
			<c:if test="${param.orderby=='goodsPrice' }">
				<a href="javascript:void(0)" class="btn gold" data-orderby="goodsPrice">
					价格 <i class="fa fa-unsorted"></i>
				</a>
			</c:if>
			<c:if test="${param.orderby!='goodsPrice' }">
				<a href="javascript:void(0)" class="btn btn-default" data-orderby="goodsPrice">
					价格 <i class="fa fa-unsorted"></i>
				</a>
			</c:if>
			<c:if test="${param.orderby=='goodsSalesNumber' }">
				<a href="javascript:void(0)" class="btn gold" data-orderby="goodsSalesNumber">
					销量 <i class="fa fa-caret-down"></i>
				</a>
			</c:if>
			<c:if test="${param.orderby!='goodsSalesNumber' }">
				<a href="javascript:void(0)" class="btn btn-default" data-orderby="goodsSalesNumber">
					销量 <i class="fa fa-caret-down"></i>
				</a>
			</c:if>
			<c:if test="${param.orderby=='goodsUpdateTime' }">
				<a href="javascript:void(0)" class="btn gold" data-orderby="goodsUpdateTime">
					时间 <i class="fa fa-caret-down"></i>
				</a>
			</c:if>
			<c:if test="${param.orderby!='goodsUpdateTime' }">
				<a href="javascript:void(0)" class="btn btn-default" data-orderby="goodsUpdateTime">
					时间 <i class="fa fa-caret-down"></i>
				</a>
			</c:if>
		</div>
		<!-- 筛选结束 -->


		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content">

				<c:if test="${goodsList==null }">
					<p class="text-center">没有更多商品了</p>
				</c:if>

				<div class="container margin-top-10">
					<div class="row margin-top-0 padding-left-5 padding-right-5">
						<c:forEach items="${goodsList }" var="g" varStatus="g_stat">
							<div class="col-xs-6">
								<div class="thumbnail margin-left-1 margin-right-1 margin-bottom-10" style="border: 1px solid #f8f8f8 !important; box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1); border-radius: 5px !important;">
									<%-- <span class="label label-sm label-default pull-right">${g.goodsOperationMode }</span> --%>
									<a href="item/${g.goodsId }">
										<img data-original="${g.goodsMainPic }" class="img-responsive center-block lazy lazy_load_img">
									</a>
									<div class="caption" style="border-top: 2px solid #ede6d9; padding-top: 5px;">
										<p style="height: 2.8em; overflow: hidden; text-overflow: ellipsis;">${g.goodsName }</p>
										<p class="margin-bottom-0">
											<c:if test="${g.goodsOriginalPrice!=null }">
												<del class="margin-right-5">
													<span class="text-light"><i class="fa fa-rmb"></i> <fmt:formatNumber value="${g.goodsOriginalPrice}" type="currency" pattern="#,##0.##" /></span>
												</del>
											</c:if>
											<strong><span class="text-red"><i class="fa fa-rmb"></i> <fmt:formatNumber value="${g.goodsPrice}" type="currency" pattern="#,##0.##" /></span></strong>
										</p>
										<%-- <p>
													<span class="text-light">${g.goodsCommentNumber==null?0:g.goodsCommentNumber}人评价</span>
												</p> --%>
									</div>
									<div class="row margin-top-5">
										<div class="col-xs-12 ">
											<a href="item/${g.goodsId }" class="pull-right margin-right-10 margin-bottom-10">
												<img alt="" src="images/buy_right_now_pic.png" style="height: 22px !important;">
											</a>
										</div>
									</div>

								</div>
							</div>
							<c:if test="${g_stat.count%2==0 }">
								<div class="clearfix"></div>
							</c:if>
						</c:forEach>
					</div>
				</div>

				<div class="text-center">
					<p id="dynamic_pager_demo2" data-totalPages="${page.totalPages}" data-currentIndex="${page.currentIndex}"></p>
				</div>
				<br>
			</div>
		</div>
		<!-- END CONTENT -->
	</div>
	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-center">
					<a href="./" class="icon-btn">
						<!-- <i class="fa fa-home text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-logo">&#xe626;</i>
						<div class="text-gold margin-top-2">首页</div>

					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="goods_type/get_shop_goods_type" class="icon-btn">
						<!-- <i class="fa fa-list-ul text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold con-qh-all-goods">&#xe622;</i>
						<div class="text-gold margin-top-2">类型</div>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="cart" class="icon-btn">
						<!-- <i class="fa fa-shopping-cart text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-cart">&#xe61b;</i>
						<div class="text-gold margin-top-2">购物车</div>

						<span class="badge badge-important" id="shooping_cart_icon_number"></span>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="item/infocenter.jsp" class="icon-btn">
						<!-- <i class="fa fa-user text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-infocenter">&#xe61d;</i>
						<div class="text-gold margin-top-2">个人中心</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- END FOOTER -->
	<!-- BEGIN levitation button -->
	<!-- /btn-group -->
	<div class="btn-group btn-group-vertical dropup right_bottom_levitation_div">

		<button type="button" class="btn btn-lg dropdown-toggle shotcut-gray" data-toggle="dropdown" style="padding: 8px; border-radius: 5px !important;">
			<!-- <i class="fa fa-ellipsis-h"></i> -->
			<i style="font-size: 22px;" class="iconfont icon-qh-more">&#xe61e;</i>
		</button>
		<ul class="dropdown-menu pull-right padding-top-5 padding-bottom-2" role="menu">
			<li>
				<a href="./">
					<!-- <i class="fa fa-home text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-home text-gold">&#xe61a;</i> 店铺首页
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="goods_type/get_shop_goods_type">
					<!-- <i class="fa fa-search text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-search text-gold">&#xe62f;</i> 搜索
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="show_collection_list">
					<!-- <i class="fa fa-star-o text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-collect text-gold">&#xe61c;</i> 我的收藏
				</a>
			</li>
			<li class="divider" style="width: 80%; margin: 2px auto;"></li>
			<li>
				<a href="show_browser_history_list">
					<!-- <i class="fa fa-clock-o text-gold"></i> -->
					<i style="font-size: 18px;" class="iconfont icon-qh-history text-gold">&#xe630;</i> 最近浏览
				</a>
			</li>
		</ul>
		<button id="wx_kf" type="button" class="btn btn-lg shotcut-gray margin-top-5" style="padding: 8px; border-radius: 5px !important;">
			<i style="font-size: 22px;" class="iconfont icon-qh-kf">&#xe62c;</i>
		</button>
		<button id="click_to_top" type="button" class="btn btn-lg shotcut-gray margin-top-5" style="padding: 8px; border-radius: 5px !important;">
			<!-- <i class="fa fa-chevron-up"></i> -->
			<i style="font-size: 22px;" class="iconfont icon-qh-top">&#xe619;</i>
		</button>
	</div>
	<!-- /btn-group -->
	<!-- END levitation button -->

	<div style="display: none;" id="tid_flag" data-value="${param.tid }"></div>
	<div style="display: none;" id="k_flag" data-value="${param.k }"></div>


	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script type="text/javascript" src="assets/plugins/jquery-bootpag/jquery.bootpag.min.js"></script>
	<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script>
		$(function()
		{
			//App.init();
			$('#dynamic_pager_demo2').bootpag(
			{
				paginationClass : 'pagination pagination-sm',
				next : '<i class="fa fa-angle-right"></i>',
				prev : '<i class="fa fa-angle-left"></i>',
				total : $('#dynamic_pager_demo2').attr("data-totalPages"),
				page : $('#dynamic_pager_demo2').attr("data-currentIndex"),
				maxVisible : 5
			}).on('page', function(event, num)
			{
				//$("#dynamic_pager_content2").html("Page " + num + " content here"); // or some ajax content loading...

				if ($("#tid_flag").attr("data-value").length > 0)
				{
					window.location.href = "spitems?tid=${param.tid }&orderby=${param.orderby }&i=" + num;
				}
				else if ($("#k_flag").attr("data-value").length > 0)
				{
					window.location.href = "spsearch?k=${param.k}&orderby=${param.orderby }&i=" + num;
				}
			});

			$("#click_to_top").click(function()
			{
				$('html,body').animate(
				{
					scrollTop : 0
				}, 'slow');
			});

			$("#search_input").keydown(function(event)
			{
				if (event.keyCode == 13)
				{
					$("#search_submit_button").trigger("click");
				}
			});

			$("#search_submit_button").click(function()
			{
				var k = $("#search_input").val();
				var orderby = "";
				if ($("#order_by_div a.blue").length > 0)
				{
					orderby = $("#order_by_div a.blue").attr("data-orderby");
				}
				else if ($("#order_by_div a").length > 0)
				{
					orderby = $("#order_by_div a").attr("data-orderby");
				}
				if (k.length > 0)
				{
					window.location.href = "${basePath}spsearch?k=" + k + "&orderby=" + orderby;
				}
			});

			//排序功能实现
			$("#order_by_div a").click(function()
			{
				if ($("#tid_flag").attr("data-value").length > 0)
				{
					window.location.href = "${basePath}spitems?tid=${param.tid}&orderby=" + $(this).attr("data-orderby");
				}
				else if ($("#k_flag").attr("data-value").length > 0)
				{
					window.location.href = "${basePath}spsearch?k=${param.k}&orderby=" + $(this).attr("data-orderby");
				}
			});

			$.post("wc_get_wechat_info",
			{
				"currentUrl" : location.href.split('#')[0]
			}, function(json)
			{
				$("#test_div").html(json.appId + "," + json.timestamp + "," + json.nonceStr + "," + json.signature + "," + json.ticket + "," + json.currentUrl);
				wx.config(
				{
					debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : json.appId, // 必填，公众号的唯一标识
					timestamp : json.timestamp, // 必填，生成签名的时间戳
					nonceStr : json.nonceStr, // 必填，生成签名的随机串
					signature : json.signature,// 必填，签名，见附录1
					jsApiList : [ 'onMenuShareTimeline', 'chooseWXPay' ]
				// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				wx.ready(function()
				{

					$("#wx_kf").click(function()
					{
						$.post("u_wx_create_customservice_do", {}, function(return_json)
						{
							if (return_json.success == true)
							{
								wx.closeWindow();
							}
						},
						//返回类型
						"json");
					});

				});
				wx.error(function(res)
				{
				});

				var code = "${param.code}";
				if (code.length > 0)
				{
					$.post("wc_get_user_info",
					{
						'code' : code
					}, function(return_json)
					{
						if (return_json.success == true)
						{
							//alert("openid(getUserInfo):" + return_json.openid);
						}
					},
					//返回类型
					"json");
				}
				else
				{
					$.post("wc_valid_have_this_person", {}, function(valid_json)
					{
						if (valid_json.success == false)
						{

							var authUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

							authUrl = authUrl.replace("APPID", json.appId);
							authUrl = authUrl.replace("REDIRECT_URI", location.href.split('#')[0]);
							authUrl = authUrl.replace("SCOPE", "snsapi_base");
							authUrl = authUrl.replace("STATE", 1);
							window.location.href = authUrl;
						}
						else
						{
							//alert("openid(validHaveThisPerson):" + valid_json.openid);
						}
					},
					//返回类型
					"json");
				}

			},
			//返回类型
			"json");

			$(".lazy_load_img").lazyload(
			{
				placeholder : "images/default_light_goods_pic.jpg",
				effect : "fadeIn",
				threshold : 600
			});

			//设置购物车购物数量
			if ($("#shooping_cart_icon_number").length > 0)
			{
				$.post('u_get_shoppingcar_number', {}, function(json)
				{
					if (json.success == true)
					{
						$("#shooping_cart_icon_number").fadeOut(100, function()
						{
							if (json.numberchange < 100)
							{
								$("#shooping_cart_icon_number").html(json.numberchange).fadeIn(100);
							}
							else
							{
								$("#shooping_cart_icon_number").html("99+").fadeIn(100);
							}
						});
					}
				},
				//返回类型
				"json");
			}
		});
	</script>
	<!-- END JAVASCRIPTS -->

</body>
</html>